<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"	
	xmlns:p="http://primefaces.org/ui"
	template="/pages/plantilla.xhtml">
	
	<ui:define name="title"> WORKSPACE: Gestion Agenda</ui:define>
	<ui:define name="contenido" >
		<f:view>
			<h:form id="myform" prependId="false">
<script type="text/javascript">
PrimeFaces.locales['es'] = {
        closeText: 'Aceptar',
        prevText: 'Anterior',
        nextText: 'Siguiente',
        currentText: 'Inicio',
        monthNames: ['Enero','Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
        dayNames: ['Domingo','Lunes','Martes','Miercoles','Jueves','Viernes','Sabado'],
        dayNamesShort: ['Dom','Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
        dayNamesMin: ['D','L','M','MI','J','V','S'],
        weekHeader: 'Semana',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: '',
        timeOnlyTitle: 'Solo hora',
        timeText: 'Tempo',
        hourText: 'Hora',
        minuteText: 'Minuto',
        secondText: 'Segundo',
        currentText: 'Fecha actual',
        ampm: false,
        month: 'Mes',
        week: 'Semana',
        day: 'Dia',
        allDayText : 'Todo el dia'
    };
</script>
			<p:growl id="growl" showDetail="true"/> 
			<table style="width:100%">
			<tr>
			<td align="left">
			<p:fieldset>
			<p:commandButton title="Nuevo" oncomplete="dlgRegProg.show();" icon="ui-icon-document" 
			actionListener="#{agendaController.nuevoPrograma}" update="opProg"/><p:spacer width="10px"/>
			</p:fieldset>
			</td>
			</tr>
			<tr>
			<td>
				<p:dataTable id="dtPrograma" value="#{agendaController.programas}" var="prog" paginator="true" rows="10"
				selectionMode="single" selection="#{agendaController.programaSeleccionado}" rowKey="#{prog.idPrograma}">
				<p:ajax event="rowSelect" update=":myform:opProg" listener="#{agendaController.editarPrograma}"
				oncomplete="dlgRegProg.show();"/>
				<p:column headerText="Descripcion Breve">
					<h:outputText value="#{prog.descripcionBreve}"/>
				</p:column>
				<p:column headerText="Fecha">
					<h:outputText value="#{prog.fecha}">
					<f:convertDateTime type="date" pattern="dd/MM/yyyy hh:mm a" timeZone="GMT-5"/>
					</h:outputText>
				</p:column>
				<p:column headerText="Detalle">
					<h:outputText value="#{prog.descripcion}"/>
				</p:column>
				</p:dataTable>
			</td>
			</tr>
			</table>
			
			<p:dialog widgetVar="dlgRegProg" header="Registrar/Editar Programa">
			<p:outputPanel id="opProg">
			<p:fieldset>
			<p:commandButton icon="ui-icon-disk" title="Guardar" oncomplete="dlgRegProg.hide();"
			actionListener="#{agendaController.guardarPrograma}" update="dtPrograma, opProg, growl"/>
			<p:spacer width="10px"/>
			<p:commandButton title="Eliminar" icon="ui-icon-trash" oncomplete="dlgRegProg.hide();"
			actionListener="#{agendaController.eliminarPrograma}" update="opProg, growl, dtPrograma"/>
			</p:fieldset>
			<p:fieldset>
				<table>
				<tr>
				<td><h:outputText value="Descripcion Breve"/></td>
				<td><h:outputText value="Fecha y Hora"/></td>
				</tr>
				<tr>
				<td><p:inputTextarea style="width:300px; height:30px" maxlength="150" 
				scrollHeight="2" value="#{agendaController.programaEditar.descripcionBreve}"/>
				</td>
				<td><p:calendar pattern="dd/MM/yyyy hh:mm a" value="#{agendaController.programaEditar.fecha}" locale="es"/></td>
				</tr>
				<tr><td colspan="2"><h:outputText value="Detalle:"/></td></tr>
				<tr><td colspan="2"><p:inputTextarea style="width:450px; height:50px" 
				maxlength="200" scrollHeight="2" value="#{agendaController.programaEditar.descripcion}"/> </td></tr>
				</table>
			</p:fieldset>
			
			<p:fieldset>
				<table>
				<tr>
					<td>
					<p:autoComplete id="acSimple" value="#{agendaController.grupoCompartir.nomGrupo}"
	                    completeMethod="#{agendaController.complete}">
	                <p:ajax event="itemSelect" listener="#{agendaController.handleSelect}" update="acSimple" />
	                </p:autoComplete>
					</td>
					<td>
					</td>
					<td><p:commandButton value="Anadir" actionListener="#{agendaController.anadirGrupo}" update="opProg"/></td>
				</tr>
				</table>
				<p:dataTable id="dtUsuarios" var="grupo" value="#{agendaController.programaEditar.grupos}"  
				                 rows="50"  rowKey="#{grupo.idGrupo}">
				        <p:column headerText="Grupo">
				            <h:outputText value="#{grupo.nomGrupo}" />
				        </p:column>
				        <p:column headerText="Eliminar" style="width:30px; align:center">
				            <p:commandButton icon="ui-icon-closethick" action="#{agendaController.eliminarGrupoSeleccionado}"
				            update="dtUsuarios">
				            <f:setPropertyActionListener value="#{grupo}" target="#{agendaController.grupoSeleccionado}"/>
				            </p:commandButton>
				        </p:column>
				</p:dataTable>  
			</p:fieldset>
			</p:outputPanel>  
			</p:dialog>
			</h:form>
		</f:view>
	</ui:define>
</ui:composition>
